<template>
	<!--待领取消费-->
	<div class="getTicket">
		<div class="cancel">
			<div class="cancel_img" @click="cancel">
				<img src="https://image.soole.com.cn/cancel.png" alt="">
			</div>
		</div>
		<div class="ticketInfo">
			<div class="ticketInfo_text">
				<div class="text1">
					<div class="ski_count">
						<div class="ski_price"><span>￥</span>200</div>
						<div class="ski_style">
							<div>
								可消费
							</div>
						</div>
					</div>
				</div>
				
				<div class="text2">
					累计200购物券即可前往商城消费
				</div>
				<div class="text3">待领取消费</div>
				
				<div class="text5">
					<div class="text2_progress">
						<van-progress
						color="#FFEA01" 
						:percentage="50" 
						 pivot-text=""
						stroke-width="8" />
					</div>
					<div class="text2_img">
						<p>180元</p>
					</div>
				</div>
				
				<div class="text6">仅差20元购物券即可消费</div>
				
				<div class="text4">
					<button data-v-240b3c1f="" 
					class="van-button van-button--default van-button--normal van-button--round" 
					style=" background: rgb(253, 228, 1); border-color: rgb(253, 228, 1);">
						<span data-v-240b3c1f="" class="van-button__text">分享好友</span>
					</button>
				</div>
				
			</div>

		</div>
	</div>
</template>

<script>
	export default{
		data(){
			return{
				
			}
		},
		mounted() {
			
		},
		methods:{
			cancel(){
				this.$emit('cancel');
			},
		}
		
	}
</script>

<style lang="scss" scoped>
	.getTicket {
		width: 375px;

		.ticketInfo {
			background-image: url('https://image.soole.com.cn/helpFriend.png');
			background-repeat: no-repeat;
			background-size: 100%;
			text-align: center;
			width: 100%;
			height: 385px;
			position: relative;

			.ticketInfo_text {
				position: absolute;
				left: 0px;
				top: 68px;
				right: 0px;
				bottom: 36px;
				margin: 0 auto;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				height: 205px;
				width: 285px;
			}

			.text1 {
				.ski_count{
					display: flex;
					justify-content: center;
					margin-left: 17px;
				}
				.ski_price{
					font-size: 60px;
					color:#F84831;
					font-weight: 700;
					span{
						font-size: 27px;
					}
				}
				.ski_style{
					div{
						background-image: url('https://image.soole.com.cn/矩形.png');
						background-repeat: no-repeat;
						background-size: 100% 100%;
						font-size: .4em;
						color: #FF2B3D;
						padding: 4px 5px;
						margin-left: 6px;
					}
				}
			}

			.text2 {
				font-size: 13px;
				color: #fff;
				width: 100%;
				padding:28px 46px 9px 46px;
			}

			.text3 {
				font-size: 30px;
				color: #FBDB01;
				margin-bottom: 10px;
			}

			.text4 {
				color: #FF000B;
				margin-bottom: 12px;
				.van-button--normal {
					font-size: 18px;
					padding: 0px 90px;
					color: #FF000B;
				}
			}
			.text5 {
				font-size: 12px;
				color: #FF2B3D;
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-left: 19px;
				.text2_progress{
					width: 143px;
				}
				.text2_img{
					margin-left: 4px;
					p{
						background-image: url('https://image.soole.com.cn/12.png');
						background-repeat: no-repeat;
						background-size: 100% 100%;
						padding: 1px 5px;
					}
				}
			}
			
			.text6{
				font-size: 13px;
				color: #FFF000;
				text-align: left;
				margin-left: 65px;
				margin-bottom: 20px;
			}
			
		}

		.cancel {
			width: 327px;
			display: flex;
			justify-content: flex-end;
		}

		.cancel_img {
			width: 36px;
			height: 36px;

			img {
				width: 100%;
				height: 100%;
			}
		}
	}
</style>
